<template>
<h3>
  message:{{message}}-{{counter}}
</h3>
  <button @click="message='hello my vue'">修改message</button>
  <button v-on:click="counter++">+1</button>
  <div>
    <button @click="isShowHome=!isShowHome">显示home</button>
    <home v-if="isShowHome"></home>
  </div>
</template>

<script>
import Home from './Home.vue'

export default {
  name: "App",
  components:{
    Home
  },
  data(){
    return{
      message:'hello app',
      counter:0,
      isShowHome:true
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  unmounted() {
    console.log('unmounted')
  }
}
</script>

<style scoped>

</style>